<template>
    <div style="height:100%;width:100%;position:relative;">
        <div class="pagetop">
            <div style="width:100%;">
                <!-- <table>
                    <tr>
                        <td>快速查询</td>
                        <td>
                            <el-input v-model="searchObj.txtsearch" style="width:130px" @keyup.native.enter="QueryData()" :clearable="true"></el-input>
                        </td>
                    </tr>
                </table> -->
                <div class="operation-list">
                    <div style="float:right;margin-right:5px">
                        <el-button icon="el-icon-search" type="primary" @click="btnQuery" v-has="'PINQUERY'" :disabled="changeflag">查询</el-button>
                        <el-button icon="el-icon-plus" @click="MainOpenDialog(1)" v-has="'PADD'" :disabled="changeflag">新增</el-button>
                        <el-button icon="el-icon-document" @click="SaveRecord" v-has="'PDELETE'" :disabled="!changeflag">保存</el-button>
                        <el-button icon="el-icon-close" @click="MainOpenDialog(4)" v-has="'PDELETE'" :disabled="!changeflag">取消</el-button>
                        <el-button icon="el-icon-delete" @click="MainOpenDialog(3)" v-has="'PDELETE'" :disabled="changeflag">删除</el-button>
                        <!-- <el-button icon="el-icon-download" @click="ExportCsv()" v-has="'PEXPORT'">导出</el-button> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="pagecenter">
            <div class="middle-center">
                <div ref="xTableDiv" style="height:100%">
                    <vxe-table :data.sync="Data.leftData" :loading="loadingmain" :select-config="{ reserve: true }" :sort-config="{ trigger: 'cell' }" border height="auto" highlight-current-row class="mytable-style" highlight-hover-column highlight-hover-row how-header-overflow ref="xTable" resizable show-overflow size="mini" stripe show-header-overflow :optimization="{ animat: false }" header-align="center" :keyboard-config="keyConfig" :keyboard-local-config="keyLocalConfig" :row-class-name ="rowClassName" @current-change="currentChangeEvent">
                        <vxe-table-column field="queuearea" sortable title="排队区域编号" width="80" show-overflow align="center"></vxe-table-column>
                        <vxe-table-column field="areaname" sortable title="区域名称" width="110" show-overflow header-align="center"></vxe-table-column>
                        <vxe-table-column field="description" sortable title="备注" width="260" show-overflow header-align="center"></vxe-table-column>
                    </vxe-table>
                </div>
            </div>
            <div class="middle-right">
                <rm-layout-top splitcolor="#ffffff" :splitwidth=5 :fixsize=100 :canDrag=false>
                    <template v-slot:fix>
                        <div style="height:100px;border:1px solid #CCC">
                            <div style="float:left;width:100%;height:100%;">
                                <el-form label-width="auto" :model="CollectArea" :disabled="isedit">
                                    <table class="formtablestyle">
                                        <tr>
                                            <td width="85px">
                                                排队区域编号
                                            </td>
                                            <td width="120px">
                                                <el-input v-model="CollectArea.queuearea" disabled></el-input>
                                            </td>
                                            <td>
                                                区域名称
                                            </td>
                                            <td>
                                                <el-input v-model="CollectArea.areaname" ref="input0" @keyup.enter.native="nextFocus(0)" @input="hasChange"></el-input>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                备注
                                            </td>
                                            <td colspan="3">
                                                <el-input v-model="CollectArea.description" :rows="3" type="textarea" ref="input1" @keyup.enter.native="nextFocus(1)" @input="hasChange"></el-input>
                                            </td>
                                        </tr>
                                    </table>
                                </el-form>
                            </div>
                        </div>
                    </template>
                    <div style="height:100%;">
                        <div style="height:100%;">
                            <el-tabs type="border-card" style="height:100%;" @tab-click="handleTabClick">
                                <el-tab-pane label="排队窗口">
                                    <vxe-table :data="Data.rightData1" :loading="LoadingDetail" :keyboard-config="keyConfig" :select-config="selectConfig" :sort-config="{trigger: 'cell'}" :edit-config="{trigger: 'click',mode: 'cell',showStatus: true,showIcon: false,activeMethod:activeMethod}" border fit height="auto" header-align="center" ref="rxTable1" resizable show-header-overflow="tooltip" show-overflow size="mini" stripe highlight-current-row>
                                        <vxe-table-column type="index" title="序号" width="50" align="center"></vxe-table-column>
                                        <vxe-table-column field="windowno" title="窗口号" width="60" align="center" :edit-render="{name: 'input', autoselect: true,events: { change: hasChange} }"></vxe-table-column>
                                        <vxe-table-column field="windowname" title="窗口名称" width="70" header-align="center" :edit-render="{name: 'input', autoselect: true,events: { change: hasChange} }"></vxe-table-column>
                                        <vxe-table-column field="queueseqseg" title="排队号段" width="70" align="center" header-align="center" :edit-render="{name: 'input', autoselect: true,events: { change: hasChange} }"></vxe-table-column>
                                        <vxe-table-column field="priortyflag" title="优先标志" width="70" align="center" header-align="center">
                                            <template v-slot="{row}">
                                                <el-checkbox true-label="1" false-label="0" v-model="row.priortyflag" @change="hasChange"></el-checkbox>
                                            </template>
                                        </vxe-table-column>
                                        <vxe-table-column field="screentype" title="屏幕类型" width="70" :edit-render="{name: 'input', autoselect: true ,events: { change: hasChange}}"></vxe-table-column>
                                        <vxe-table-column field="callertype" title="呼叫器类型" width="80" header-align="center" :edit-render="{name: 'input', autoselect: true,events: { change: hasChange} }"></vxe-table-column>
                                        <vxe-table-column field="description" title="备注" width="170" align="center" header-align="center" :edit-render="{name: 'input', autoselect: true ,events: { change: hasChange}}">
                                        </vxe-table-column>
                                        <vxe-table-column field="windowid" title="采样窗口ID" width="80" header-align="center">
                                        </vxe-table-column>
                                        <!-- <vxe-table-column field="callstatus" title="叫号状态" width="50" align="center"></vxe-table-column>
                                        <vxe-table-column field="requesttime" title="请求时间" width="250" header-align="center">
                                        </vxe-table-column>
                                        <vxe-table-column field="calltime" title="叫号时间" width="70" align="center" header-align="center">
                                        </vxe-table-column>
                                        <vxe-table-column field="queueno" title="叫号队列序号" width="50" align="center"></vxe-table-column>
                                         <vxe-table-column field="queuearea" title="排队区域编号" width="70" align="center" header-align="center">
                                        </vxe-table-column> -->
                                        <template v-slot:fix>
                                            <div style="font-size:17px;padding:3px;background-color:#fff;overflow:auto;text-align:center">
                                                <el-button @click="rxTableAddEvent(1)" class="btnclass">新增明细</el-button>

                                                <el-button @click="rxTableDeleteEvent(1)" class="btnclass">删除明细</el-button>
                                            </div>
                                        </template>
                                    </vxe-table>
                                </el-tab-pane>
                                <el-tab-pane label="采样区域对照报告单元">
                                    <div style="height:100%" :key="keyid">
                                        <vxe-table :data="Data.rightData2" :loading="LoadingDetail" :keyboard-config="keyConfig" :select-config="selectConfig" :sort-config="{trigger: 'cell'}" :edit-config="{trigger: 'click',mode: 'cell',showStatus: true,showIcon: false,activeMethod:activeMethod}" border fit height="auto" header-align="center" ref="rxTable2" resizable show-header-overflow="tooltip" show-overflow size="mini" stripe>
                                            <vxe-table-column field="seq" title="序号" width="50" align="center" :edit-render="{name: 'input', autoselect: true ,events: { change: hasChange}}"></vxe-table-column>
                                            <vxe-table-column field="rptunitid" title="报告单元" width="200" align="center" header-align="center">
                                                <template v-slot="{row}">
                                                    <rm-ddl-rptunit v-model="row.rptunitid" width="200px" @change="rptunitChange" key="rptunitid"></rm-ddl-rptunit>
                                                </template>
                                            </vxe-table-column>
                                            <!-- <vxe-table-column field="queuearea" title="采样区域ID" width="80" header-align="center">
                                            </vxe-table-column> -->
                                            <template v-slot:fix>
                                                <div style="font-size:17px;padding:3px;background-color:#fff;overflow:auto;text-align:center">
                                                    <el-button @click="rxTableAddEvent(2)" class="btnclass">新增明细</el-button>
                                                    <el-button @click="rxTableDeleteEvent(2)" class="btnclass">删除明细</el-button>
                                                </div>
                                            </template>
                                        </vxe-table>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                    </div>
                </rm-layout-top>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
export default {
    name: "MNG250",
    data() {
        return {
            ModData: [],
            AddData: [],
            utype: this.$tool.getSession(this.$tool.loginutype),
            hospcode: this.$tool.getSession(this.$tool.selectedhis),
            keyConfig: {
                isEdit: true,
            },
            keyLocalConfig: {
                isArrow: true,
                isDel: true,
                isTab: true,
            },
            selectConfig: {
                reserve: true,
            },
            changeflag: false,
            focusIndex: 0,
            keyid: 0,
            selrow: {},
            operatetype: "2",
            searchObj: { txtsearch: "" },
            LoadingDetail: false,
            loadingmain: false,
            CollectArea: { queuearea: "", areaname: "", description: "" },
            Data: { leftData: [], rightData1: [], rightData2: [] },
        };
    },
    created() {
        this.initPage();
    },
    computed: {
        isedit() {
            if (this.$refs.xTable.tableData.length == 0 && this.operatetype != "1") {
                return true;
            } else {
                return false;
            }
        },
    },
    mounted() {},
    updated() {},
    methods: {
        btnQuery() {
            this.AddData = [];
            this.ModData = [];
            this.initPage();
        },
        //主表初始化
        initPage() {
            var that = this;
            that.loadingmain = true;
            that.$tool
                .request({
                    url: "MNG/MNG2/MNG250",
                    method: "post",
                    data: {
                        action: "initPage",
                    },
                })
                .then((res) => {
                    that.loadingmain = false;

                    if (res.data.length > 0) {
                        that.Data.leftData = res.data; //主表赋值
                        that.selrow = res.data[0];
                        that.$refs.xTable.setCurrentRow(that.selrow);
                        that.queryRight();
                    } else {
                        that.selrow.queuearea = "";
                        that.CollectArea = {};
                        that.Data.leftData = [];
                        that.Data.rightData1 = [];
                        that.Data.rightData2 = [];
                    }
                })
                .catch((e) => {
                    this.$alert(e, "出错");
                });
        },
        //明细查询
        queryRight() {
            this.$tool
                .request({
                    url: "MNG/MNG2/MNG250",
                    method: "post",
                    data: {
                        action: "queryRight",
                        queuearea: this.selrow.queuearea,
                    },
                })
                .then((res) => {
                    this.CollectArea = res.data0[0];
                    this.Data.rightData1 = res.data1;
                    this.Data.rightData2 = res.data2;
                });
        },
        currentChangeEvent({ row, column }) {
            if (this.changeflag) {
                this.$refs.xTable.setCurrentRow(this.selrow);
            } else {
                this.operatetype = "2";
                this.selrow = row;
                this.queryRight();
            }
        },
        hasChange() {
            this.changeflag = true;
        },
        activeMethod({ row, column }) {
            if (column.property == "windowno") {
                if (row.addflag == "1") return true;
                else return false;
            } else {
                return true;
            }
        },
        // 回车切换输入框
        nextFocus(index) {
            if (index > 3) return false;
            var that = this;
            var focusIndex = index + 1;
            setTimeout(function () {
                that.$refs["input" + focusIndex].focus();
            }, 1);
        },
        MainOpenDialog(k) {
            if (k == 1) {
                //新增
                this.CollectArea = {
                    queuearea: "",
                    areaname: "",
                    description: "",
                };
                this.Data.rightData1 = [];
                this.Data.rightData2 = [];
                this.operatetype = "1";
                this.$refs.input0.focus();
                this.hasChange();
            } else if (k == 4) {
                //取消
                this.changeflag = false;
                this.operatetype = "2";
                //空数据时不查询右侧表格
                if (this.Data.leftData.length == 0) {
                    this.CollectArea = {};
                    this.Data.rightData1 = [];
                    this.Data.rightData2 = [];
                } else {
                    this.queryRight();
                }
            } else {
                // 删除
                this.$confirm(
                    "您确定这条数据吗？",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    },
                    "提示"
                )
                    .then(() => {
                        this.ConfirmDel();
                    })
                    .catch(() => {});
            }
        },
        // 确认删除
        ConfirmDel() {
            this.operatetype = "3";
            this.SaveRecord();
        },
        //主表及明细操作保存
        SaveRecord() {
            let data = this.$refs.rxTable2.tableData;
            this.$pub.ResetSeq(data, "seq");
            let that = this;
            that.$tool
                .request({
                    url: "MNG/MNG2/MNG250",
                    method: "post",
                    data: {
                        action: "SaveRecord",
                        utype: that.operatetype,
                        saveinfo: that.CollectArea,
                        oldinfo: that.selrow,
                        urec1: that.$refs.rxTable1.getRecordset(),
                        urec2: that.$refs.rxTable2.getRecordset(),
                    },
                })
                .then((res) => {
                    if (res.errcode == "1") {
                        that.changeflag = false;
                        // that.queryRight();
                        that.$pub.message(that, "操作成功！", "success");
                        if (that.operatetype == "1") {
                            if (that.AddData.indexOf(res.keyid) == -1) {
                                that.AddData.push(res.keyid);
                            }
                            that.$refs.xTable.insert(res.data[0]).then(({ row }) => {
                                that.selrow = row;
                                that.setHightLightRow();
                                that.queryRight();
                            });
                            that.operatetype = 2;
                        } else if (that.operatetype == "2") {
                            if (that.ModData.indexOf(res.keyid) < 0) {
                                that.ModData.push(res.keyid);
                            }
                            that.updateTableCurrentRow(res.data[0]);
                            that.queryRight();
                        } else {
                            let row = this.$table.DelRecordSelect(this.$refs.xTable, -1, this);
                            if (!!row) {
                                that.selrow = row;
                                that.setHightLightRow();
                                that.queryRight();
                            } else {
                                this.CollectArea = {};
                                this.Data.rightData1 = [];
                                this.Data.rightData2 = [];
                            }
                        }
                        that.operatetype = "2"
                    } else {
                        that.$alert("操作失败！" + res.errmsg, "提示");
                    }
                })
                .catch((e) => {
                    this.$alert(e, "出错");
                });
        },
        updateTableCurrentRow(obj) {
            this.selrow.queuearea = obj.queuearea;
            this.selrow.areaname = obj.areaname;
            this.selrow.description = obj.description;
            this.$refs.xTable.updateListenter();
            this.setHightLightRow();
        }, //修改或新增后选中行
        setHightLightRow() {
            let row = this.$refs.xTable.getTableData().fullData.find((m) => m.queuearea == this.selrow.queuearea);
            if (!!row) {
                setTimeout(() => {
                    this.$refs.xTable.scrollToRow(row);
                    this.$refs.xTable.setCurrentRow(row);
                }, 10);
            }
        },
        rxTableAddEvent(flag) {
            if (this.isedit) return false;
            if (flag == "1") {
                this.$refs.rxTable1.insert({ addflag: "1" }).then(({ row }) => {
                    this.$nextTick(() => {
                        this.$refs.rxTable1.setCurrentRow(row);
                        this.$refs.rxTable1.setActiveRow(row);
                    });
                });
            } else {
                let data = this.$refs.rxTable2.tableData;
                this.$refs.rxTable2.insert({ queuearea: this.CollectArea.queuearea, rptunitid: "", seq: (data.length + 1) * 10 }).then(({ row }) => {
                    this.$nextTick(() => {
                        this.$refs.rxTable2.setCurrentRow(row);
                        this.$refs.rxTable2.setActiveRow(row);
                    });
                });
            }
            this.hasChange();
        },
        rxTableDeleteEvent(flag) {
            if (this.isedit) return false;
            if (flag == "1") {
                let row = this.$table.DelRecordSelect(this.$refs.rxTable1, -1, this);
                this.$nextTick(() => {
                    this.$refs.rxTable1.setCurrentRow(row);
                });
            } else {
                let row = this.$table.DelRecordSelect(this.$refs.rxTable2, -1, this);
                this.$nextTick(() => {
                    this.$refs.rxTable12.setCurrentRow(row);
                });
            }
            this.hasChange();
        },
        rptunitChange(code, name) {
            this.hasChange();
        },
        handleTabClick(tab, event) {
            this.keyid++;
        },
         //主表
        rowClassName({ row, rowIndex }) {
            if (this.AddData.indexOf(row.queuearea+"") > -1) {
                return "row-new";
            }
            if (this.ModData.indexOf(row.queuearea+"") > -1) {
                return "row-modify";
            }
        },
    },
};
</script>

<style scoped>
.pagetop {
    width: 100%;
    height: 35px;
    display: -webkit-box;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    border: 1px solid #ccc;
    position: absolute;
    overflow-x: auto;
    word-wrap: none;
    z-index: 99;
}
.pagecenter {
    position: absolute;
    top: 40px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: hidden;
}

.middle-center {
    position: absolute;
    height: 100%;
    left: 0px;
    right: 655px;
    overflow: hidden;
}

.middle-right {
    position: absolute;
    height: 100%;
    width: 650px;
    right: 0px;
}
.middle-right-mask {
    position: absolute;
    height: 100%;
    width: 650px;
    right: 0px;
    background: #ffffff;
    opacity: 0.5;
    z-index: 999;
}

.formtablestyle {
    height: 100%;
    font-size: 12px;
    color: #333;
    width: 100%;
}
.formtablestyle tr td:nth-child(1),
td:nth-child(3),
td:nth-child(5) {
    text-align: right;
}
.popTableStyle tr td:nth-child(1),
td:nth-child(3),
td:nth-child(5),
td:nth-child(7) {
    text-align: right;
}
::v-deep .middle-right .formtablestyle tr td div .el-input__inner {
    /*border: 1px solid #ffffff !important;
     padding: 0px !important;*/
    color: #000000;
}
::v-deep .el-color-picker--small .el-color-picker__trigger {
    width: 100% !important;
    height: 24px !important;
    padding: 0px;
}
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    border-color: #000000;
}
::v-deep  .mytable-style.vxe-table .vxe-body--column.col-orange {
    background-color: #f8f8f8;
}
::v-deep  .middle-center .vxe-table .vxe-cell {
    padding: 0px;
}
::v-deep  .xTable1Class .vxe-table .vxe-cell {
    padding: 0px;
}
::v-deep  .middle-center tr.vxe-body--row.row-new {
    color: #cc6600;
}
::v-deep  .middle-center tr.vxe-body--row.row-modify {
    color: blue !important;
}
::v-deep  .middle-right .el-radio {
    margin-right: 5px;
}
::v-deep  .el-button.is-disabled {
    border: 0px;
    color: grey;
    background-color: #e6e6e6;
    font-weight: normal;
}
::v-deep  .note-text .el-textarea__inner {
    padding: 5px !important;
}
::v-deep  .btnclass {
    background-color: #e6e6e6;
    color: black;
}
::v-deep  .middle-center tr.vxe-body--row.row-new {
    color: #cc6600;
}
::v-deep  .middle-center tr.vxe-body--row.row-modify {
    color: blue !important;
}
</style>
